﻿$(function () {

    var resultSelects = $(".resultSelect");

    //Creates all the divs for the result selection

    for (var i = 1; i <= resultSelects.length; i++) {
        $("#resultSelect" + i).html(

            "<div class=\"row\">" +
                "<div class=\"small-1 small-offset-11 columns text-right\">" +
                    "<img class=\"closeResultSelect\" style=\"cursor:pointer;\" height=\"20px\" width=\"20px\" src=\"Content/img/redCross.png\">" +
                "</div>" +
            "</div>" +
            "<div class=\"row\">" +
                "<div class=\"small-3 columns\">" +
                    "<div class=\"resultOption activeScore\" resultdiv=\"" + i + "\" hoa=\"h\">0</div>" +
                    "<div class=\"resultOption\" resultdiv=\"" + i + "\" hoa=\"h\">1</div>" +
                    "<div class=\"resultOption\" resultdiv=\"" + i + "\" hoa=\"h\">2</div>" +
                    "<div class=\"resultOption\" resultdiv=\"" + i + "\" hoa=\"h\">3</div>" +
                    "<div class=\"resultOption\" resultdiv=\"" + i + "\" hoa=\"h\">4</div>" +
                    "<div class=\"resultOption secondaryResult\" resultdiv=\"" + i + "\" hoa=\"h\" style=\"display:none\">5</div>" +
                    "<div class=\"resultOption secondaryResult\" resultdiv=\"" + i + "\" hoa=\"h\" style=\"display:none\">6</div>" +
                    "<div class=\"resultOption secondaryResult\" resultdiv=\"" + i + "\" hoa=\"h\" style=\"display:none\">7</div>" +
                    "<div class=\"resultOption secondaryResult\" resultdiv=\"" + i + "\" hoa=\"h\" style=\"display:none\">8</div>" +
                    "<div class=\"resultOption secondaryResult\" resultdiv=\"" + i + "\" hoa=\"h\" style=\"display:none\">9</div>" +
                    "<div class=\"resultOption secondaryResult\" resultdiv=\"" + i + "\" hoa=\"h\" style=\"display:none\">10</div>" +
                "</div>" +
                "<div class=\"small-6 columns\" style=\"margin-top:10px; height:220px\">" +
                    "<div id=\"bigResult" + i + "\" class=\"bigResult text-center\">0-0</div>" +
                    "<div class=\"buttonPronosticar text-center\" onclick=\"closeResult(\'" + i + "\')\">Pronosticar</div>" +
                    "<div id=\"verMasResultados" + i + "\" class=\"buttonVerMas text-center\" onclick=\"togglePart2(\'" + i + "\')\">Más Resultados</div>" +
                "</div>" +
                "<div class=\"small-3 columns\">" +
                    "<div class=\"resultOption activeScore\" resultdiv=\"" + i + "\" hoa=\"a\">0</div>" +
                    "<div class=\"resultOption\" resultdiv=\"" + i + "\" hoa=\"a\">1</div>" +
                    "<div class=\"resultOption\" resultdiv=\"" + i + "\" hoa=\"a\">2</div>" +
                    "<div class=\"resultOption\" resultdiv=\"" + i + "\" hoa=\"a\">3</div>" +
                    "<div class=\"resultOption\" resultdiv=\"" + i + "\" hoa=\"a\">4</div>" +
                    "<div class=\"resultOption secondaryResult\" resultdiv=\"" + i + "\" hoa=\"a\" style=\"display:none\">5</div>" +
                    "<div class=\"resultOption secondaryResult\" resultdiv=\"" + i + "\" hoa=\"a\" style=\"display:none\">6</div>" +
                    "<div class=\"resultOption secondaryResult\" resultdiv=\"" + i + "\" hoa=\"a\" style=\"display:none\">7</div>" +
                    "<div class=\"resultOption secondaryResult\" resultdiv=\"" + i + "\" hoa=\"a\" style=\"display:none\">8</div>" +
                    "<div class=\"resultOption secondaryResult\" resultdiv=\"" + i + "\" hoa=\"a\" style=\"display:none\">9</div>" +
                    "<div class=\"resultOption secondaryResult\" resultdiv=\"" + i + "\" hoa=\"a\" style=\"display:none\">10</div>" +
                "</div>" +
            "</div>"

            );
    }


    $(".resultOption").click(function () {

        var allOptions = $(this).parent().children();

        for (i = 0; i < $(this).parent().children().length; i++) {
            $(allOptions.get(i)).removeClass("activeScore");
        }

        $(this).addClass("activeScore")

        var resultDiv = $(this).attr("resultdiv");

        var currentResult = $("#bigResult" + resultDiv).html();
        var newResult;
        var scores = currentResult.split("-");
        if ($(this).attr("hoa") == "h") {
            newResult = $(this).html() + "-" + scores[1];
        }
        else {
            newResult = scores[0] + "-" + $(this).html();
        }

        var bigResult = $("#bigResult" + resultDiv);

        bigResult.html(newResult);
        bigResult.css("color", "#D63939");
        setTimeout(function () {
            bigResult.css("color", "#888888");
        }, 150);
        //        bigresult.animate({ color: '#888888' }, 400);
    });

    $(".resultField").click(function () {

        var scoresPanel = $(this).parent().next(".resultSelect");
        $(scoresPanel).find(".bigResult").text($(this).val());
        var arrayResultado = $(this).val().split('-');
        var golesA = arrayResultado[0];
        var golesB = arrayResultado[1];

        $(scoresPanel).find(".resultOption").each(function (key, value) {
            $(this).removeClass("activeScore");
            if ($(this).attr("hoa") == "h" && $(this).text() == golesA) {
                $(this).addClass("activeScore");
            }
            else if ($(this).attr("hoa") == "a" && $(this).text() == golesB) {
                $(this).addClass("activeScore");
            }
        });

        var resultSelect = $(this).attr("resultSelect");
        if ($("#algunResultAbierto").attr("value") == "false") {
            $("#resultSelect" + resultSelect).fadeIn(150);
            $("#algunResultAbierto").attr("value", "true");
        }
        $(".secondaryResult").css("display", "none");
        $("#verMasResultados" + resultSelect).show();
        $("#resultSelect" + resultSelect).css("height", "270px");

        // Forcing the fitText plugin to adjust the texts
        $(window).resize();
    });

    $(".closeResultSelect").click(function () {
        $("#algunResultAbierto").attr("value", "false");
        $(".resultSelect").hide();
    });

    //---- STARTS GROUPS ----

    $(".backArrow").click(function () {
        var type = $(this).attr("data-arrowType")
        var thisGroup = $(this).parents("[data-containerType='" + type + "']");
        prevGroup = $(thisGroup).prev("[data-containerType='" + type + "']");
        var groupToShow = $(prevGroup).length == 0 ? $("[data-containerType='" + type + "']").last() : prevGroup;
        $(thisGroup).fadeOut(100, function () {
            $(groupToShow).fadeIn(100);
            $(window).resize();
        });
        $("#algunResultAbierto").attr("value", "false");
        $(".resultSelect").hide();
    });

    $(".forwardArrow").click(function () {
        var type = $(this).attr("data-arrowType")
        var thisGroup = $(this).parents("[data-containerType='" + type + "']");
        nextGroup = $(thisGroup).next("[data-containerType='" + type + "']");
        var groupToShow = $(nextGroup).length == 0 ? $("[data-containerType='" + type + "']").first() : nextGroup;
        $(thisGroup).fadeOut(100, function () {
            $(groupToShow).fadeIn(100);
            $(window).resize();
        });
        $("#algunResultAbierto").attr("value", "false");
        $(".resultSelect").hide();
    });

    //---- ENDS GROUPS ----

    //---- STARTS LOGIN ----

    $("#token").hide();

    $("#checkMostrarClave").click(function () {
        if ($(this).is(":checked")) {
            $("#hiddenToken").hide();
            $("#token").show();
            $("#token").val($("#hiddenToken").val());
        }
        else {
            $("#token").hide();
            $("#hiddenToken").show();
            $("#hiddenToken").val($("#token").val());
        }
    });

    //---- ENDS LOGIN ----

    $("#menuIcon, #menuText").click(function () {
        $("#small-menu-options").toggle();
        if ($("#menuIconPointingDown").is(":visible")) {
            $("#menuIconPointingDown").hide();
            $("#menuIconPointingUp").show();
        }
        else {
            $("#menuIconPointingDown").show();
            $("#menuIconPointingUp").hide();
        }
    });
});



//---- AUX FUNCTIONS ----

function setEmail(email) {
    $("#session-bar").html(email != "" ? "<b>Bienvenid@: </b><b style='color: rgb(180, 22, 22);'>" + email + "</b>" : "<a class='loginRedirectBtn' href='Ingresar'>Ingresar</a>");
}

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
    return pattern.test(emailAddress);
};


//Closes the div for the result selection
function closeResultSelect(id, resultado) {
    $("#resultSelect" + id).fadeOut(300);
    $("[resultSelect='resultSelect" + id + "']").val(resultado);
    $("#algunResultAbierto").attr("value", "false");
}

function cargarResultados() {

    var textBoxEmail = $("#email");
    var mailContainer = $("#mailContainer");
    var emailAddress = textBoxEmail.val();

    //Si puso mal el e-mail scrolleo hacia el control y lo pongo rojo
    if (!isValidEmailAddress(emailAddress)) {
        $('html, body').stop().animate({
            scrollTop: $("#email").offset().top - 5
        }, 1500, 'easeInOutExpo');
        textBoxEmail.css("background-color", "#FFE6E6");
        mailContainer.delay(1500).animate({ backgroundColor: '#FFFF66' }, 100);
        mailContainer.delay(100).animate({ backgroundColor: '#FFFFFF' }, 1500);
        //Retorno false para que el botón no lleve a cabo ninguna acción
        return false;
    }

    //Se cargan los resultados ingresados para pasarle al controlador
    var retorno = "";
    for (var i = 1; i < 16; i++) {
        retorno = retorno + i + ";" + $("input[name=resultado" + i + "]").val() + ";";
    }
    retorno = retorno + i + ";" + $("input[name=resultado16]").val();
    $("#resultados").val(retorno);

    var cantGoles;
    //Evito que envíe vacío el input de cantidad total de goles
    if ($("#cantGoles").val() == "") {
        cantGoles = "0";
    }
    else {
        cantGoles = $("#cantGoles").val();
    }

    var resultadosEspeciales = $("#primeroA").val() + ";" + $("#segundoB").val() + ";"
         + $("#primeroB").val() + ";" + $("#segundoA").val() + ";" + $("#perdedorCruce1").val() + ";"
         + $("#perdedorCruce2").val() + ";" + $("#ganadorCruce1").val() + ";" + $("#ganadorCruce2").val() + ";"
         + $("#campeon").val() + ";" + $("#segundo").val() + ";" + $("#tercero").val() + ";"
         + $("#masGoles").val() + ";" + cantGoles;
    $("#resultadosEspeciales").val(resultadosEspeciales);
    textBoxEmail.css("background-color", "#FFFFFF");
    return true;
}

function togglePart2(divNum) {
    $("#verMasResultados" + divNum).hide();
    $(".secondaryResult").show();
    $("#resultSelect" + divNum).animate({ height: '510px' }, 50);
}

function closeResult(resultNum) {
    $("[name='resultado" + resultNum + "']").val($("#bigResult" + resultNum).html());
    $("#algunResultAbierto").val("false");
    $("#resultSelect" + resultNum).css("height", "270px");
    $("#resultSelect" + resultNum).fadeOut(300);
}